<template>
  <div class="address-info">
    <span class="ss"><i class="el-icon-s-home"></i>选择收货地址</span>
    <div class="ii"><i class="el-icon-s-opportunity"></i>收货人需要提供真实地址信息</div>
    <el-carousel class="address-card" :autoplay="false" indicator-position="none" arrow="always">
      <el-carousel-item v-for="group in groupCount" :key="group">
        <el-row>
          <el-col class="address-col" v-for="(info,index) in addressInfo.slice((group*4),(group+1)*4)" :key="index+group*4">
            <el-card class="card" :body-style="{ padding: '0px' }" @click.native="change(index+group*4)">
              <el-image class="address-img" :src="activeUrl(index+group*4)"></el-image>
              <div class="address-content">
                <span class="address">{{city(info)}}</span><br>
                <span class="tel">{{info.phone}}</span>
                <span class="name"><span class="n">({{info.name}}</span></span>
                <span class="s">)收</span>
                <hr class="hr">
                <span class="detail">{{detail(info)}}</span>
                <span class="alert" v-show="isHide(index+group*4)" @click="dialogFormVisible = true">修改</span>
                <div class="default" v-if="(index+group*4)==0">默认地址</div>
                <div class="isDefault" v-if="isHide(index+group*4)&&(index+group*4)!=0" @click="updateDefault">设为默认</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
<!-- 点击修改弹出对话框-->
    <div class="dialog">
      <el-dialog class="tit" title="修改地址" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="closeOff">
      <el-form :model="selectAddressInfo">
        <el-form-item label="地址信息" :label-width="formLabelWidth">
          <el-cascader
              v-model="selectAddressInfo.areaCode"
              :options="area"
              :props="{ expandTrigger: 'hover' }"
              ref="addArea"
              @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth" >
          <el-input v-model="detailAddress" autocomplete="off" @change="detailChange"></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名" :label-width="formLabelWidth">
          <el-input v-model="selectAddressInfo.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="selectAddressInfo.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="updateAddress()">确 定</el-button>
      </div>
    </el-dialog>
    </div>
    <router-link class="list-group-item" active-class="active" to="/personCenter/getAddress"><el-button class="btn">管理收货地址</el-button></router-link>
  </div>
</template>

<script>
import area from '@/utils/area'

export default {
  name: "Address",
  data(){
    return{
      userId: null,
      addressId: null,
      addressInfo:[],
      selectIndex: 0,
      selectAddressInfo:{},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      area,
      areaLabels: [],
      updateForm: {
        name: '',
        phone: '',
        address: '',
        areaCode: 0,
        userId: 0,
        isDefault:''
      },
      detailAddress:' '
    }
  },
  computed:{
    groupCount(){
      let number = Math.ceil(this.addressInfo.length/4);
      let arr=[]
      for (let i=0;i<number;i++){
        arr.push(i)
      }
      return arr
    },
  },
  methods:{
    activeUrl(index){
      return index==this.selectIndex?"https://img.alicdn.com/tfs/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png":'https://img.alicdn.com/tps/i2/T1VPiBXvpeXXbjLKQ7-237-106.png'
    },
    change(index){
      this.selectIndex=index;
      this.selectAddressInfo=this.addressInfo[index];
      this.$bus.$emit('selectData',this.selectAddressInfo);
      this.addressId=this.addressInfo[index].id;
      this.detailAddress=this.selectAddressInfo.address.split(' ').slice(3,).join(" ")
    },
    isHide(index){
      return index==this.selectIndex?true:false;
    },
    handleChange(val) {
      this.areaLabels = this.$refs['addArea'].getCheckedNodes()[0].pathLabels
      this.selectAddressInfo.areaCode=val[2]
      let id = this.selectAddressInfo.id;
      for (let i = 0; i < this.addressInfo.length; i++) {
        if (this.addressInfo[i].id ==id) {
          this.addressInfo[i].address=this.areaLabels.join(" ")
        }
      }
      this.detailAddress=''
    },
    detailChange(val){
      this.detailAddress=val
      this.selectAddressInfo.address=this.selectAddressInfo.address.split(" ").slice(0,3).join(" ")+" "+this.detailAddress
    },
    city(obj){
      return obj.address.split(" ").slice(0,2).join(" ")
    },
    detail(obj){
      return obj.address.split(" ").slice(2,).join(" ")
    },
    updateAddress() {
      this.updateForm.userId = this.selectAddressInfo.userId
      this.updateForm.name=this.selectAddressInfo.name
      this.updateForm.phone=this.selectAddressInfo.phone
      this.updateForm.address = this.selectAddressInfo.address
      if (this.detailAddress.trim()=="") {
        this.$message.info("请输入详细地址")
        return;
      }
      this.updateForm.areaCode = this.selectAddressInfo.areaCode
      this.updateForm.isDefault=this.selectAddressInfo.isDefault
      this.postRequest('/cms/address/update/' + this.addressId, this.updateForm).then((resp) => {
        this.$message.success(resp.message);
        this.dialogFormVisible = false
      }).then(() => {
        this.getList()
      })
      this.$bus.$emit('selectData',this.selectAddressInfo);
    },
    updateDefault(){
      this.selectAddressInfo.isDefault=1
      this.postRequest('/cms/address/update/' + this.addressId, this.selectAddressInfo).then(() => {
        this.dialogFormVisible = false
      }).then(() => {
        this.getList()
        this.selectIndex=0
      })
    },
    getList(){
      this.getRequest('/cms/address/getList').then((resp)=> {
        this.addressInfo = resp.data
      })
    },
    cancel(){
      this.dialogFormVisible = false
      this.getList()
    },
    closeOff(){
      this.dialogFormVisible = false
      this.getList()
    }
  },
  created() {
    this.getRequest('/cms/address/getList').then((resp)=> {
      this.addressInfo = resp.data
    })
  },
}
</script>

<style scoped>
  .address-info{
    padding-top: 43px;
    width: 100%;
    margin: auto;
    height: 355px;
  }
  .ss {
    font: bold 24px 宋体;
  }
  .ss i{
    text-shadow: 1px 2px 2px #5c3838;
    padding-right: 5px;
  }
  .ii{
    margin: 13px 0px 5px 0px;
    border: 1px solid #adabab;
    font-size: 17px;
    width: 255px;
  }
  .ii i{
    color: #ff6600;
    padding:0px 3px 0px 6px;
  }
  .address-card{
    margin-top: 15px;
    padding-left: 9px;
    height: 300px;
  }
  .address-col{
    width: 23.6%;
    margin: 2px 0px 5px 11px;
  }
  .card{
    height: 196px;
  }
  .address-img{
    width: 100%;
    height: 198px;
  }
  .address-content{
    font:600 19px 黑体;
    color: #636262;
    position: relative;
    top:-178px;
    margin-left: 19px;
    margin-right: 19px;
  }
  .hr{
    height: 1px;
    opacity: 0.5;
    margin: 7px 0px 6px 0px;
  }
  .tel,.name,.s{
    color: #908f8f;
    display: inline-block;
    padding-top: 3px;
  }
  .name{
    width:89px;
  }
  .n{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: right;
    position: relative;
    top:5px;
  }
  .detail{
    font:500 17px 华文黑体;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .alert{
    color: #d57e73;
    font:300 15px 华文黑体;
    position: absolute;
    top:137px;
  }
  .alert:hover{
    color: #d70303;
  }
  .isDefault:hover{
    color: black;
  }
  ::v-deep .el-carousel__arrow{
    width: 20px;
    height: 199px;
    position: relative;
    border-radius: 0;
    top:101px;
  }
  ::v-deep .el-carousel__arrow--left{
    left: -0.88%;
  }
  ::v-deep .el-carousel__arrow--right{
    left: 96.6%;
  }
  .btn{
    z-index: 10;
    position: relative;
    top:-65px;
    left: 83.3%;
    width:15%;
    color: #807c7c;
    font:400 17px 华文黑体;
  }
  .btn:hover{
    background: #f6e4e4;
    color: #f55a5a;
    border: 1px solid #f8a0a0;
  }
  .tit{
    font-size: 25px;
  }
  .default,.isDefault{
    z-index: 11;
    position: absolute;
    top:-25px;
    right: -18px;
    padding: 3px;
    width: 34%;
    font: 400 18px 华文黑体;
    background: #8e8c8c;
    opacity: 0.3;
    color: white;
  }
</style>